<template>
  <div class="hello">
    <canvas ref="canvasRef" width="500" height="500"></canvas>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts'

const canvasRef = ref()

onMounted(() => {
  const echart1 = echarts.init(canvasRef.value)
  echart1.setOption({
    title: {
      id: 'chart1',
      text: '图表的标题',
      link: 'https://nima.vip/',
      target: 'blank',
      textStyle: {
        color: 'red',
        fontStyle: 'italic',
        fontWeight: '600',
        fontFamily: 'sans-serif',
        fontSize: 18,
        lineHeight: 18,
        width: 100,
        height: 18,
        textBorderColor: '#000',
        textBorderWidth: 3,
        textBorderType: [5, 10],
        textBorderDashOffset: 5,
        textShadowColor: 'transparent',
        textShadowBlur: 2,
        textShadowOffsetX: 0,
        textShadowOffsetY: 1,
        overflow: 'truncate'
      }
    }
  })
})
</script>

<style scoped>

</style>
